<template>
    <div class="mainFrame">
        <el-row class="mainRow" :gutter="10">
            <el-col :span="16">
                <div class="mainDiv">
                    <template v-if="this.isFinish">
                        <indexChart :starHotelInfo="starHotelInfo" :nonStarHotelInfo="nonStarHotelInfo"
                            :complainsInfo="complainsInfo" :warningsInfo="warningsInfo" :visitsInfo="visitsInfo"
                            ref="myCharts" />
                    </template>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="mainDiv">
                    <el-space class="rightSpace" direction="vertical" :fill="true" :fill-ratio="95">
                        <info-card cardName="投诉总览" cardLink="/manager/complainhandle" :itemList="complaints" />
                        <info-card cardName="酒店总览" cardLink="/manager/starhotel" :itemList="hotels" />
                        <info-card cardName="预警总览" cardLink="/manager/warningmanager" :itemList="warnings" />
                    </el-space>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.mainFrame {
    width: 100%;
    height: 100%;
    padding: 2px;
}

.mainFrame .mainRow {
    width: 100%;
    height: 100%;
}

.mainDiv {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #f2f6fc;
}

.rightSpace {
    width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
</style>

<script>
import infoCard from "../../components/manager/index/infoCard.vue";
import indexChart from "../../components/manager/index/indexChart.vue";
import { getRequest } from "../../api/axiosAPI";

export default {
    data() {
        return {
            isFinish: false,
            complaints: [{ info: "待处理投诉" }, { info: "已处理投诉" }],
            hotels: [{ info: "星级酒店" }, { info: "非星级酒店" }],
            warnings: [{ info: "预警总数" }],
            starHotelInfo: [
                { info: "三星级", number: "2" },
                { info: "四星级", number: "3" },
                { info: "五星级", number: "1" },
            ],
            nonStarHotelInfo: [
                { info: "青年旅舍", number: "4" },
                { info: "民宿", number: "2" },
            ],
            complainsInfo: [
                { info: "未处理", number: "5" },
                { info: "已处理", number: "3" },
            ],
            warningsInfo: [
                { info: "蓝色预警", number: "5" },
                { info: "黄色预警", number: "3" },
                { info: "红色预警", number: "1" },
            ],
            visitsInfo: [
                { info: "四月", number: "150" },
                { info: "五月", number: "500" },
                { info: "六月", number: "220" },
                { info: "七月", number: "160" },
            ],
        };
    },
    methods: {
        getInfos() {
            getRequest('http://localhost:8022/api/manager/inform', null)
                .then((response) => {
                    if (response.status === 200) {
                        return response.data;
                    } else {
                        console.log('NetWork Error!');
                    }
                }).then((data) => {
                    let tempData = data;
                    console.log(data);
                    this.complaints[0].info = '待处理的投诉: ' + tempData.data.count0;
                    this.complaints[1].info = '已处理的投诉: ' + tempData.data.count2;
                    this.complainsInfo[0].number = tempData.data.count0;
                    this.complainsInfo[1].number = tempData.data.count2;
                    this.hotels[0].info = '星级酒店: ' + (tempData.data.countHotel3 + tempData.data.countHotel4 + tempData.data.countHotel5);
                    this.hotels[1].info = '非星级酒店: ' + (tempData.data.countHotel1 + tempData.data.countHotel2);
                    this.starHotelInfo[0].number = tempData.data.countHotel3;
                    this.starHotelInfo[1].number = tempData.data.countHotel4;
                    this.starHotelInfo[2].number = tempData.data.countHotel5;
                    this.nonStarHotelInfo[0].number = tempData.data.countHotel2;
                    this.nonStarHotelInfo[1].number = tempData.data.countHotel1;
                    this.warningsInfo[0].number = tempData.data.countBlue;
                    this.warningsInfo[1].number = tempData.data.countYellow;
                    this.warningsInfo[2].number = tempData.data.countRed;
                    this.warnings[0].info = '预警总数: ' + (tempData.data.countBlue + tempData.data.countYellow + tempData.data.countRed);
                    this.isFinish = true;
                })
        }
    },
    created() {
        this.getInfos();
    }
};
</script>
